<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<html>
    <head>
        <title>Datos metereologicos</title>


        <link href="style/style.css" rel="stylesheet" type="text/css" media="screen" />
        <script language="JavaScript" src="javaScripts/reloj.js"></script>

        <link type="text/css" href="style/jquery-ui-1.8.9.custom/css/le-frog/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />
        <script type="text/javascript" src="style/jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="style/jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"></script>
        <script type="text/javascript" src="js/datosMetereologicos.js"></script>

        <script type="text/javascript">
            function consultarDia(date){
                document.obtenerDatosForm.fecha.value=date;
            }


            $(function(){

                // Datepicker
                $('#datepicker').datepicker({
                    onSelect: function(date){
                        consultarDia(date)
                    },
                    changeYear: true,
                    changeMonth: true ,
                    inline: true,
                    maxDate: new Date()

                });

            });

        </script>

        <script>

            // Estas no cambian
            var offset = 0;
            var tam = 0;
            var limit = 0;
            var Tipo = "";

            listarDatos();
            listarDatos();
            cantidadesMaximas();

            setInterval("listarDatos()",5000);

            setInterval("cantidadesMaximas()",5000);

            function cantidadesMaximas(){

                // Lo que va entre corchetes que si limit es lo que se pasa
                // al action y se captura con el request
                $.getJSON("CantidadesMaximas.do",
                function(data3) {

                    $('#resultado2').empty();
                    $('#resultado3').empty();
                    var fila;

                    // Esto se hace para pintar el fondo de las filas pares e impares. (NO CAMBIA)
                    $.each(data3.VerDatos , function(i,item){

                        if ( (i % 2) == 0){
                            fila = "<tr bgcolor = \"#fff\"> ";
                        }
                        else{
                            fila = "<tr bgcolor = \"#ecf2f6\">";
                        }

                        var string = fila +
                            "<td>"+item.maxTemperatura+"°C</td>"+
                            "<td>"+item.maxPresion+"hPa</td>"+
                            "<td>"+item.maxViento+"KpH</td>" +
                            "<td>"+item.maxHumedad+"%</td>"+
                            "<td>"+item.maxPrecipitacion+"mm</td></tr>";

                        $('#resultado2').append(string)

                        var  string2 = fila + 
                            "<td>"+item.minTemperatura+"°C</td>"+
                            "<td>"+item.minPresion+"hPa</td>"+
                            "<td>"+item.minViento+"KpH</td>"+
                            "<td>"+item.minHumedad+"%</td>"+
                            "<td>"+item.minPrecipitacion+"mm</td></tr>";

                        $('#resultado3').append(string2)
                    });
                });
            }

            function listarDatos(){

                // Lo que va entre corchetes que si limit es lo que se pasa
                // al action y se captura con el request
                $.getJSON("ListarDatos.do",{limit: limit, offset: offset},
                function(data2) {
 
                    if(limit != 0){
                        $('#resultado').empty();
                        var fila;

                        // Esto se hace para pintar el fondo de las filas pares e impares. (NO CAMBIA)
                        $.each(data2.VerDatos , function(i,item){

                            if ( (i % 2) == 0){
                                fila = "<tr bgcolor = \"#fff\"> ";
                            }
                            else{
                                fila = "<tr bgcolor = \"#ecf2f6\">";
                            }

                            var string = fila +
                                "<td>"+item.fecha+"</td>"+
                                "<td>"+item.hora+"</td>"+
                                "<td>"+item.temperatura+"°C</td>"+
                                "<td>"+item.viento+"KmpH</td>"+
                                "<td>"+item.humedad+"%</td>"+
                                "<td>"+item.presion_atmosferica+"hPa</td>"+
                                "<td>"+item.precipitacion+"mm</td>";

                            string +=
                                "</tr>";
                            fila++;
                            $('#resultado').append(string)
                        });
                    }
                    else{
                        // Se pinta la tabla en la página. (Cambia en todos los script)
                        // Lo unico que cambia en todos los script es el llamado a la función.
                        $.each(data2.VerDatos , function(i,item){
                            tam = parseInt(item.tam);
                        });
                        limit = 10;
                    }
                }
            );
                if(limit!=0){
                    $("#currentpage").empty();
                    $("#pagelimit").empty();
                    $("#currentpage").append((offset/limit)+1);
                    $("#pagelimit").append(Math.floor((tam-1)/limit)+1)
                }

            }


            // Se fija el número de páginas totales de la consulta (NO CAMBIA)
            function setLimit(piso){
                limit = parseInt(piso);
                listarDatos();
            }

            // Se fijan los alcances de las flechas primera, última, siguiente y anterior (NO CAMBIA)
            function setOffset(i, completo){
                if(completo && (i==-1)){
                    offset = 0;
                }
                else if(completo && (i==1)){
                    offset = Math.floor((tam-1)/limit)*limit;
                }
                else if(!completo && i==-1){
                    if(offset>=limit){
                        offset -= limit;
                    }
                }
                else{ //!completo && i==1
                    if(offset<tam-limit){
                        offset += limit;
                    }
                }
                listarDatos();
            }

        </script>
        <script>
            // Este script determina que la primera vez que se ve la tabla (sin resultados),
            // el numero de paginas y la pagina actual serán 1. (NO CAMBIA)
            if(limit == 0){
                $("#currentpage").append(1);
                $("#pagelimit").append(1)
            }
        </script>

    </head>

    <body onLoad="muestraReloj()">
        <div id="wrapper">
            <div id="header">
                <table>
                    <tr>
                        <td align="center">
                            <img src="style/images/Cebolla.png" height="100"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="logo">
                                <h1><a href="#">Datos Metereológicos</a></h1>
                                <p>obtenidos en la <a href="http://www.usb.ve">Universidad Simón Bolívar</a></p>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- end #header -->
            <div id="menu">

            </div>
            <!-- end #menu -->
            <div id="page">
                <div id="content">
                    <div id="banner"><img src="style/images/img07.jpg" alt="" /></div>
                    <div class="post">

                        <h2 class="title">Datos Obtenidos:</h2>
                        <jsp:include page="datos.jsp"></jsp:include>

                    </div>
                    <div style="clear: both;">&nbsp;</div>
                </div>
                <!-- end #content -->
                <div id="sidebar">

                    <h2>Hora Actual</h2>
                    <!--Se muestra el reloj -->
                    <center>
                        <span id="spanreloj"></span>
                    </center>
                    <br>
                    <h2>Calendario</h2>
                    <div id=NavBar align="center">
                        <font size="4">Seleccione el día cuyos datos metereológicos desea observar:</font>
                        <br>
                        <br>
                        <html:form action="/obtenerDatos"
                                   styleId="obtenerDatosForm">
                            <div id="datepicker"></div>
                            <br>
                            <html:text property="fecha"/>
                            <html:submit value="enviar"/>

                        </html:form>

                    </div>

                </div>
                <!-- end #sidebar -->
                <div style="clear: both;">&nbsp;</div>
            </div>
            <!-- end #page -->
        </div>
        <div id="footer-content">

        </div>
        <div id="footer">
            <p> (c) 2009 Sitename.com. Design by <a href="http://www.nodethirtythree.com">nodethirtythree</a> and <a href="http://www.freecsstemplates.org">Free CSS Templates</a>.</p>
        </div>
        <!-- end #footer -->
    </body>

</html>
